/* 
1 发送请求获取数据 
2 点击轮播图 预览大图
  1 给轮播图绑定点击事件
  2 调用小程序的api  previewImage 
    链接:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html
3 点击 加入购物车
  1 先绑定点击事件
  2 获取缓存中的购物车数据 数组格式 
  3 先判断 当前的商品是否已经存在于 购物车
  4 已经存在 修改商品数据  执行购物车数量++ 重新把购物车数组 填充回缓存中
  5 第一次添加商品不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素 带上 购买数量属性 num  重新把购物车数组 填充回缓存中
  6 弹出提示
4 商品收藏
  1 页面onShow的时候  加载缓存中的商品收藏的数据
  2 判断当前商品是不是被收藏 
    1 是 改变页面的图标
    2 不是 。。
  3 点击商品收藏按钮 
    1 判断该商品是否存在于缓存数组中
    2 已经存在 把该商品删除
    3 没有存在 把商品添加到收藏数组中 存入到缓存中即可
 */

/*
  参数请求：import { request } from "../../request/index";
  导入解决报错的包：import regeneratorRuntime from '../../lib/runtime/runtime';
*/
import { request } from "../../request/index";
import regeneratorRuntime from '../../lib/runtime/runtime';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 商品详情请求返回的是一个对象，不是数组
    goodsObj: {},
    // 商品是否被收藏
    isCollect: false
  },
  // 商品对象 (临时对象)
  GoodsInfo: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onShow: function () {
    // 获取当前的小程序的页面栈-数组(长度最大是10页面) 
    let pages = getCurrentPages();
    // 数组中 索引最大的页面就是当前页面
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;

    const { goods_id } = options;
    this.getGoodDetail(goods_id);
  },
  async getGoodDetail(goods_id) {
    const goodsObj = await request({ url: "/goods/detail", data: { goods_id } });
    // console.log(goodsObj);
    this.GoodsInfo = goodsObj;
    // 1 获取缓存中的商品收藏数组
    let collect = wx.getStorageSync("collect") || [];
    // 2 判断当前商品是否被收藏
    // collect.some()会遍历回调函数：只要有一个为true，则collect.some()返回值就为true
    let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
    this.setData({
      goodsObj: {
        goods_price: goodsObj.goods_price,
        goods_name: goodsObj.goods_name,
        // iphone部分手机 不识别 webp图片格式 
        // 最好找到后台 让他进行修改 
        // 临时自己改 确保后台存在 1.webp => 1.jpg 
        goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
        pics: goodsObj.pics

      },
      isCollect
    })
  },
  // 点击轮播图 放大预览
  handlePrevewImage(e) {
    //  console.log('%c'+"预览","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");

    // 1 先构造要预览的图片数组
    // map(v=>v.pics_mid);将pics中的所有pics_mid拿出来构造成一个新数组
    const urls = this.GoodsInfo.pics.map(v => v.pics_mid);
    // 获取当前点击需要放大图片的http链接
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
      // current: current, // 当前显示图片的 http 链接
      // urls: urls // 需要预览的图片 http 链接列表
      current, // 当前显示图片的 http 链接
      urls // 需要预览的图片 http 链接列表
    })
  },
  // 点击 将商品添加到购物车
  handleCartAdd() {
    // 判断用户是否登录
    this.handleUserLogin();
    const userinfo = wx.getStorageSync("userinfo");
    if (userinfo) {
      // 1 获取缓存中的购物车 数组
      // 因为第一次获取的是空字符串，所以要将空字符串转换为空数组 ||[] , 以确保cart是一个数组
      let cart = wx.getStorageSync("cart") || [];
      // 2 判断 商品对象是否存在于购物车数组中
      // 因为cart是个数组，所以v => 相当于逐一遍历的一个元素
      let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);
      if (index === -1) {
        // console.log("不存在");
        // 3 不存在 第一次添加
        // GoodsInfo是一个对象，this.GoodsInfo.num=1，若GoodsInfo中没有num属性会自动添加
        this.GoodsInfo.num = 1;
        // 商品的选中状态
        this.GoodsInfo.checked = true;
        cart.push(this.GoodsInfo);
      }
      else {
        // console.log("存在");
        // console.log(index);

        // 4 已经存在购物车数据 执行 num++
        // cart[index]就是指定的对象元素，对象元素中有一个num属性,让其+1
        cart[index].num++;
        // console.log(cart[index]);
        // console.log(cart[index].num);
      }
      // 5 把购物车重新添加回缓存中
      // console.log(cart);
      wx.setStorageSync("cart", cart);
      // 6 弹框提示
      wx.showToast({
        title: '加入成功',
        icon: 'success',
        // true 防止用户手抖疯狂点击按钮，使用mask: true 会让用户1.5秒后才能继续点击
        mask: true
      });
    }
  },
  // 点击 商品收藏图标
  handleCollect() {
    // 判断用户是否登录
    this.handleUserLogin();
    const userinfo = wx.getStorageSync("userinfo");
    if (userinfo) {
      let isCollect = false;
      // 1 获取缓存中的商品收藏数组
      let collect = wx.getStorageSync("collect") || [];
      // 2 判断该商品是否被收藏过
      let index = collect.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);
      // 3 当index!=-1 表示已经收藏过
      if (index !== -1) {
        // 能找到，说明已经收藏过了，在数组中删除该商品
        // 删除collect数组中index对应的索引，删除个数为1
        collect.splice(index, 1);
        isCollect = false;
        wx.showToast({
          title: '取消成功',
          icon: 'success',
          // 防止多次点击
          mask: true,
        });
      }
      else {
        // 此时是点击收藏，将商品加入到collect收藏数组中
        collect.push(this.GoodsInfo);
        isCollect = true;
        wx.showToast({
          title: '收藏成功',
          icon: 'success',
          // 防止多次点击
          mask: true,
        });
      }
      // 4 将收藏数组collect加入到缓存中
      wx.setStorageSync("collect", collect);
      // 5 修改data中的isCollect属性
      this.setData({
        isCollect
      });
    }

  },
  // 判断用户是否登录
  handleUserLogin() {
    // 0 首先判断缓存中有没有userinfo值（即判断用户有没有登录）
    const userinfo = wx.getStorageSync("userinfo");
    // console.log(userinfo);
    if (!userinfo) {
      wx.navigateTo({ url: "/pages/login/index" });
      return;
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})